<template>
  <div class="singer">
    <div class="singerinfo">
      <div class="singerImg">
        <img :src="singerInfo.img1v1Url" />
        <span @click="toSingerInfo(singerInfo.accountId)"><i class="iconfont icon-user" style="font-size: 20px;"></i>个人主页</span>
      </div>
      <div class="detail">
        <div class="tag">
          <el-tag size="medium">歌手</el-tag>
          <span class="name">{{ singerInfo.name }}</span>
        </div>
        <div class="num">
          <span><i class="iconfont icon-music1"></i> 单曲数：{{ singerInfo.musicSize }}</span>
          <span><i class="iconfont icon-album"></i> 辑数：{{ singerInfo.albumSize }}</span>
          <span><i class="iconfont icon-MV"></i> MV数：{{ singerInfo.mvSize }}</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="专辑" name="first">
          <SingerAlbum :hotSongs="hotSongs"></SingerAlbum>
        </el-tab-pane>
        <el-tab-pane label="MV" name="second">
          <SingerMv></SingerMv>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="third">
          <SingerInfo :id="id"></SingerInfo>
        </el-tab-pane>
        <el-tab-pane label="相似歌手" name="fourth">
          <SimiSinger :id='id'></SimiSinger>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import { getSingerDetail } from '../../../network/singer.js'
import SingerAlbum from './SingerAlbum.vue'
import SingerMv from './SingerMv.vue'
import SingerInfo from './SingerInfo.vue'
import SimiSinger from './SimiSinger.vue'
export default {
  components: {
    SingerAlbum,
    SingerMv,
    SingerInfo,
    SimiSinger
  },
  data () {
    return {
      id: 0,
      singerInfo: {},
      hotSongs: [],
      activeName: 'first'
    }
  },
  methods: {
    toSingerInfo (id) {
      this.$router.push('/user_info/' + id)
    },
    getSingerDetail (id) {
      getSingerDetail(id).then(res => {
        // console.log(res.data)
        this.singerInfo = res.data.artist
        this.hotSongs = res.data.hotSongs
      })
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.getSingerDetail(this.id)
  }
}
</script>

<style lang="less" scoped>
  .singer {
    width: 82%;
    overflow: auto;
    .singerinfo {
      width: 95%;
      margin: 30px auto;
      display: flex;
      justify-content: flex-start;
      .singerImg {
        position: relative;
        width: 25%;
        img {
          width: 100%;
        }
        span {
          position: absolute;
          bottom: 10%;
          left: 50%;
          color: #fff;
          transform: translate(-50%);
          padding: 3px 10px;
          border: 1px solid #fff;
          border-radius: 15px;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        span:hover {
          background-color: rgba(0, 0, 0, 0.5);
        }
      }
      .detail {
        margin: 10px 30px;
        display: flex;
        flex-direction: column;
        .tag {
          display: flex;
          align-items: center;
          .el-tag {
            background-color: #c62f2f;
            color: #fff;
          }
          .name {
            font-size: 25px;
            margin-left: 10px;
          }
        }
        .num {
          margin: 20px 0;
          display: flex;
          flex-direction: column;
          span {
            margin: 5px 0;
            display: flex;
            align-items: center;
            i {
               font-size: 20px;
               margin-right: 5px;
            }
          }
        }
      }
    }
    .el-tabs {
      width: 95%;
      margin: auto;
    }
  }
  /deep/ .el-tabs .el-tabs__item {
    font-size: 18px;
    padding: 0 40px;
  }
  /deep/ .el-tabs__nav-scroll, .el-tabs__nav {
    margin-left: 40px;
  }
</style>
